<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>m u j j i o</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <!--META KEYWORDS-->
    <meta name="author" content="mujjio"/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

    <link rel="stylesheet" href="css/global_style.css" type="text/css"/>
    <link rel="stylesheet"  href="css/isotope.css" type="text/css"/> 

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/modernizr-transitions.js"></script> 
    <script src="js/jquery.elastic.source.js"></script>
    <script src="js/audio-player/audio-player.js"></script>  
    <script src="js/video/player/jwplayer.js"></script>

    <script> 
      
      
 
      $(function(){
	
        var $container = $('#container');
        
        $('#filters a').click(function(){
          var selector = $(this).attr('data-filter');
  
          $('#container').isotope({
            filter: selector
          });
   
          return false;
        });
        
        $container.isotope({
          itemSelector: '.box',
          transformsEnabled: false,
          visibleStyle: { opacity: 1 },
          hiddenStyle: { opacity: 0 }
        });
        
  
        // switches selected class on buttons
        $('#left').find('.option-set a').click(function(){
          var $this = $(this);
 
          // don't proceed if already selected
          if ( !$this.hasClass('selected') ) {
            $this.parents('.option-set').find('.selected').removeClass('selected');
            $this.addClass('selected');
          }
 
        });

      });
    </script> 

  </head>

  <body>

    <div id="top-bar">
      <ul> 
        <li><a href="#"><img src="images/icons/settings.png"/></a></li>
        <li><a href="#">Gary McCarville</a></li> 
      </ul>
    </div>

    <div id="navigation"> 

      <ul> 
        <li><a href="#"><img src="images/icons/icon_comment_off.png"/>Updates</a></li> 
        <li><a href="#"><img src="images/icons/icon_camera_off.png"/>Photographs</a></li> 
        <li><a href="#"><img src="images/icons/icon_video_off.png"/>Videos</a></li> 
        <li><a href="#"><img src="images/icons/icon_music_off.png"/>Music</a></li>  
        <li><a href="#"><img src="images/icons/icon_products_off.png"/>Products</a></li> 
        <li><a href="#"><img src="images/icons/icon_services_off.png"/>Services</a></li> 
      </ul> 
    </div>

    <div id="main-search">
      <fieldset>
        <input class="search-input" type="text" onblur="if(this.value=='')this.value='Search Mujjio';" onfocus="if(this.value=='Search Mujjio')this.value='';" value="Search Mujjio"/>
      </fieldset>
    </div>


    <div id="left" class="clearfix clear"> 
      <div class="logo"><img src="images/logos/mujjio_logo.png" width="100" height="47" /></div> 
      <ul id="filters" class="option-set floated clearfix"> 
        <li>View</li>
        <li><a href="#filter" data-filter=".about" class="selected">About</a></li> 
        <li><a href="#filter" data-filter=".friends">Friends</a></li>    
        <li><a href="#filter" data-filter=".photo">Photographs</a></li>
        <li><a href="#filter" data-filter=".music">Music</a></li> 
        <li><a href="#filter" data-filter=".video">Video</a></li> 
        <li><a href="#filter" data-filter=".products">Products</a></li>  
        <li><a href="#filter" data-filter=".services">Services</a></li>       
      </ul> 
    </div><!-- #left --> 

    <div id="wrapper">

      <div id="container" class="clearfix clear"> 

        <div class="box about"> 
          <img src="images/profile/suhail_large.jpg" width="308" height="220" /></a> 
          <h2 class="light">Suhail Manzoor</h2> 

        </div><!-- .box --> 

        <div class="box about"> 
          <h1 class="light">Gender</h1>
          <div class="spaced">Male</div>
          <div class="pad10"></div>
          <h1 class="light">Birthday</h1>
          <div class="spaced">24 July</div>
          <div class="pad10"></div>
          <h1 class="light">Interested in</h1>
          <div class="spaced">Friendship</div>
          <div class="spaced">Job Offers</div>
          <div class="spaced">Offers for my Network</div>
        </div>

        <div class="box about"> 
          <h1 class="light">My Favourite Photograph</h1> 
          <span class="light">From - <a href="#">Gary McCarville</a></span> 
          <div class="pad30"></div>
          <img src="images/gallery/gallery1.jpg" width="308" height="220" />           
          <div class="pad10"></div>
          <h2><a href="#">Like</a> - <a href="#">Dislike</a> -<a href="#">Share</a> - <a href="#">Buy</a> - <a href="#">Bid</a></h2>
        </div><!-- .box -->

        <div class="box about">   
          <h1 class="light">My Favourite Video</h1> 
          <span class="light">From - <a href="#">Gary McCarville</a></span> 
          <div class="pad30"></div>
          <div class="horizontal-pad-20">&nbsp;</div>
          <div style="width:360px; height:227px;float: left"><div id="videospace1"></div></div>
          <div class="clear"></div>
          <div class="pad20"></div>
          <h2><a href="#">Like</a> - <a href="#">Dislike</a> -<a href="#">Share</a> - <a href="#">Buy</a> - <a href="#">Bid</a></h2>
        </div><!-- .box --> 

        <div class="box about"> 
          <h1 class="light">About me</h1>
          <div class="spaced">Engineer by day, poet by night</div>
          <div class="pad20"></div>
          <h1 class="light">Where I live</h1>
          <div class="spaced">London</div>
          <div class="pad20"></div>
          <h1 class="light">Where I lived in the past</h1>
          <div class="spaced">New York</div>
          <div class="spaced">Paris</div>
          <div class="spaced">Munich</div>
        </div>

        <div class="box about"> 
          <h1 class="light">Occupation</h1>
          <div class="spaced">Java Developer</div>
          <div class="pad20"></div>
          <h1 class="light">Employment</h1>
          <div class="spaced">Monitise</div>
          <div class="spaced">Cisco</div>
          <div class="spaced">Vodafone</div>
          <div class="spaced">LogicaCMG</div>
        </div>

        <div class="box about" style="height: 360px">            
          <h1 class="light">Music I like</h1> 
          <div class="pad20"></div>
          <p id="audioplayer_1"></p>
          <div class="clear"></div>
          <div class="pad5"></div>
          New Shoes by <a href="#">Paolo Nutini</a><br/>
          <div class="pad5"></div>
          <a href="#">Like - </a><a href="#">Dislike - </a><a href="#">Comment - </a><a href="#">Share - </a><a href="#">Buy £0.99</a>
          <div class="pad20"></div>
          <p id="audioplayer_2"></p>
          <div class="clear"></div>
          <div class="pad5"></div>
          New Shoes by <a href="#">Paolo Nutini</a><br/>
          <div class="pad5"></div>
          <a href="#">Like - </a><a href="#">Dislike - </a><a href="#">Comment - </a><a href="#">Share - </a><a href="#">Buy £0.99</a>
          <div class="pad20"></div>
          <p id="audioplayer_3"></p>
          <div class="clear"></div>
          <div class="pad5"></div>
          New Shoes by <a href="#">Paolo Nutini</a><br/>
          <div class="pad5"></div>
          <a href="#">Like - </a><a href="#">Dislike - </a><a href="#">Comment - </a><a href="#">Share - </a><a href="#">Buy £0.99</a>
          <div class="pad20"></div>
          <p id="audioplayer_4"></p>
          <div class="clear"></div>
          <div class="pad5"></div>
          New Shoes by <a href="#">Paolo Nutini</a><br/>
          <div class="pad5"></div>
          <a href="#">Like - </a><a href="#">Dislike - </a><a href="#">Comment - </a><a href="#">Share - </a><a href="#">Buy £0.99</a>     
        </div><!-- .box --> 

        <div class="box about"> 
          <h1 class="light">I Recommend This Product</h1> 
          <span class="light">From - <a href="#">IOU Project</a></span> 
          <img src="images/products/product2.jpg" width="220" height="220" />          
          <div class="pad10"></div>
          <a href="#">Like</a> - <a href="#">Dislike</a> -<a href="#">Share</a> - <a href="#">Buy £39.99</a>
        </div><!-- .box -->


        <div class="box photo isotope-hidden"> 
          <img src="images/gallery/gallery1.jpg" width="380" height="270" />          
          <div class="pad10"></div>
          <h2><a href="photo_gallery.html">Summer of 69</a></h2>
        </div><!-- .box -->
        
        <div class="box photo isotope-hidden"> 
          <img src="images/gallery/gallery2.jpg" width="380" height="270" />          
          <div class="pad10"></div>
          <h2><a href="photo_gallery.html">Face Art</a></h2>
        </div><!-- .box -->
        
        <div class="box photo isotope-hidden"> 
          <img src="images/gallery/gallery3.jpg" width="380" height="270" />          
          <div class="pad10"></div>
          <h2><a href="photo_gallery.html">Black and White</a></h2>
        </div><!-- .box -->
        
        
        <div class="box photo isotope-hidden"> 
          <img src="images/gallery/gallery4.jpg" width="380" height="270" />          
          <div class="pad10"></div>
          <h2><a href="photo_gallery.html">London Gallery</a></h2>
        </div><!-- .box -->

      </div><!-- #container -->

      <div class="footer clearfix clear"> 
        <p>&copy; 2011 Mujjio.</p> 
      </div><!-- .footer --> 


      <script type='text/javascript'>
        jwplayer('videospace1').setup({
          'flashplayer': 'js/video/player/player.swf',
          'file': 'http://www.youtube.com/watch?v=Yybe3hB3Ix4',
          'provider': 'youtube',
          'controlbar': 'bottom',
          'width': '360',
          'height': '227'
        });
      </script>

      <script type="text/javascript">  
        AudioPlayer.setup("js/audio-player/player.swf", {  
          width: 380,  
          initialvolume: 100,  
          transparentpagebg: "yes",  
          left: "000000",  
          lefticon: "FFFFFF"  
        });  
      </script> 

      <script type="text/javascript">  
        AudioPlayer.embed("audioplayer_1", {
          soundFile: "http://www.graniteforme.com/media/06_-Paolo_Nutini-_New_Shoes.mp3",  
          titles: "New Shoes",  
          artists: "Paolo Nutini",  
          autostart: "no"  
        });  
      
        AudioPlayer.embed("audioplayer_2", { 
          soundFile: "http://www.graniteforme.com/media/06_-Paolo_Nutini-_New_Shoes.mp3",  
          titles: "New Shoes",  
          artists: "Paolo Nutini",  
          autostart: "no"  
        });  
      
        AudioPlayer.embed("audioplayer_3", {
          soundFile: "http://www.graniteforme.com/media/06_-Paolo_Nutini-_New_Shoes.mp3",  
          titles: "New Shoes",  
          artists: "Paolo Nutini",  
          autostart: "no"  
        });  
      
        AudioPlayer.embed("audioplayer_4", { 
          soundFile: "http://www.graniteforme.com/media/06_-Paolo_Nutini-_New_Shoes.mp3",  
          titles: "New Shoes",  
          artists: "Paolo Nutini",  
          autostart: "no"  
        });  
      
  
      </script>


  </body>
</html>
